<template>
  <div>
      <div class="herd">
        <div class="left" @click="fun()">&lt;</div>
      <h2>美甲推品频道</h2>
      <img src="qiaoxiaodong/xsms1.png" alt="">
      </div>
      <div class="pdimg">
          <img src="qiaoxiaodong/tjpd1.png" alt="">
      </div>
      <div class="cont">
          <div class="pdlt">
              <h4>新品发布<strong>潮流款式首发</strong></h4>
              <img src="qiaoxiaodong/pd1.png" alt="">
              <img src="qiaoxiaodong/pd2.png" alt="">
            <span>￥99起<s>￥169</s></span>
            <span>￥129起<s>￥189</s></span>
          </div>
          <div class="pdrg">
              <h4>河狸定制<strong>独家设计师款</strong></h4>
              <img src="qiaoxiaodong/pd3.png" alt="">
              <img src="qiaoxiaodong/pd4.png" alt="">
            <span>￥269起</span>
            <span class="sp">￥269起</span>
          </div>
      </div>
  </div>
</template>

<script>
export default {
    methods:{
      fun() {
        this.$router.go(-1)
    }
    }
}
</script>

<style scoped>
    .herd {
    width: 100%;
    height: 1.4rem;
    /* background: #e96667; */
    display: flex;
    position: relative;
    border-top: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
    background: #fff;
  }
  .left {
    /* flex: 1; */
    width: 0.5rem;
    height: 0.5rem;
    font-size: 0.5rem;
    margin-left: 0.2rem;
    margin-top: 0.4rem;
  }
  h2 {
    /* flex: 2; */
    font-size: 0.4rem;
    /* color: #fff; */
    position: absolute;
    left: 2.5rem;
    top: 0.4rem;
  }
  .herd img {
    /* flex: 1; */
    width: 0.5rem;
    height: 0.5rem;
    position: absolute;
    left: 6.8rem;
    top: 0.4rem;
  }
  .pdimg {
      width: 100%;
      height: 3.3rem;
      /* background: red; */
  }
  .pdimg img{
      width: 100%;
      height: 3.3rem;
  }
  .cont {
      width: 90%;
      height: 2.9rem;
      /* background: red; */
      margin: 0 auto;
      display: flex;
      margin-top: 0.2rem;
  }
  .pdlt {
      width: 4rem;
      height: 3rem;
      background: #f7f7f7;
  }
  .pdlt h4 {
      font-size: 0.4rem;
      margin-top: 0.2rem;
  }
  .pdlt h4 strong {
      font-size: 0.25rem;
      color: #8a8a8a;
  }
  .pdlt img {
      width: 1.4rem;
      height: 1.4rem;
      margin-left: 0.1rem;
      margin-top: 0.2rem;
  }
  .pdlt span {
      display: inline-block;
      margin-top: 0.2rem;
      font-size: 0.28rem;
      color: red;
  }
  .pdlt span s {
      color: #747474;
      font-size: 0.2rem;
  }
  .pdrg {
      width: 4rem;
      height: 3rem;
      background: #f7f7f7;
  }
  .pdrg h4 {
      font-size: 0.4rem;
      margin-top: 0.2rem;
  }
  .pdrg h4 strong {
      font-size: 0.25rem;
      color: #8a8a8a;
  }
  .pdrg img {
      width: 1.4rem;
      height: 1.4rem;
      margin-left: 0.1rem;
      margin-top: 0.2rem;
  }
  .pdrg span {
      display: inline-block;
      margin-top: 0.2rem;
      font-size: 0.28rem;
      color: red;
  }
  .pdrg span s {
      color: #747474;
      font-size: 0.2rem;
  }
  .pdrg .sp {
      margin-left: 0.5rem;
  }
</style>